<script>
  import $ from 'dfish-widget'
  import View from './View.vue'
	import ExamDialog from '../examples/ExamDialog.vue'

  export default {
    mixins: [View],
    data() {
      return {
        name: 'Dialog',
        remark: '对话框。Dialog继承View，因此也具有View的所有方法属性。',
        isW: true,
				methods: [
					{
					  name: 'resolve(result)',
					  remark: '返回数据。仅当对话框由widget.pop()方式打开时，本方法有效',
					  option: '<div><var>result</var>: Any 任意数据类型</div>',
					},
					{
						name: 'reject(exception)',
						remark: '失败返回。仅当对话框由widget.pop()方式打开时，本方法有效',
						option: '<div><var>exception</var>: Any 任意数据类型</div>',
					}
					
				],
        events: [{
          name: 'close',
          remark: '关闭时触发',
          option: '(event: Event)',
        }, {
          name: 'show',
          remark: '显示时触发',
          option: '(event: Event)',
        }],
        computed: [
          {
            name: 'commander',
            remark: '对话框的来源Widget',
            type: 'Widget',
          }
        ],
				examples: [{
				  remark: '点击按钮显示对话框',
				  type: 'html',
					view: true,
				  code: [
						{
							src: 'index.vue',
							code: `
				        <template>
				          <w-buttonbar gap="10">
				            <w-button @click="showDialog" text="显示Dialog"></w-button>
				          </w-buttonbar>
				        </template>
				        <${'script'}>
				          import $ from 'dfish-widget'
				          import ExampleDialog from './ExampleDialog.vue'
						    	
				          export default {	
				            methods: {
				              async showDialog(e) {
				                const result = await $(e).pop(ExampleDialog, {title: '编辑'})
				                //点击对话框的"确定"按钮，会弹出提示
				                $.alert(result.success, 'br', 3000)
				              }
				            }
				          }
				        </${'script'}>
				      `
						}, {
							src: 'ExampleDialog.vue',
							code: `
						    <template>
						      <w-dialog ref="dialog" class="dialog" width="760" :height="500" :cover="true">
						        <w-horizontal class="dialog__head" height="45">
						          <w-html class="dialog__head__title" valign="middle" v-dialog-move="true" width="*">{{title}}</w-html>
						          <w-html class="dialog__head__close" align="center" valign="middle" width="40" @click="close"><i class="f-i f-i-close"></i></w-html>
						        </w-horizontal>
						        <w-vertical class="dialog__content" height="*" :scroll-y="true">
						          <div>一些内容...</div>
						          <div>一些内容...</div>
						        </w-vertical>
						        <w-horizontal class="dialog__foot" height="50">
						          <w-buttonbar class="dialog__foot__oper" width="*" height="*" align="right" gap="10">
						            <w-button face="primary" text="确定" @click="save"></w-button>
						            <w-button text="关闭" @click="close"></w-button>
						          </w-buttonbar>
						        </w-horizontal>
						      </w-dialog>
						    </template>
						    
						    <${'script'}>
						      export default {
						      	props: ['title'],
						      	methods: {
						      	  save() {
						      	  	const result = {success: true}
						      	  	this.$refs.dialog.resolve(result)
						      	  	this.close()
						      	  },
						      	  close() {
						      	  	this.$refs.dialog.close()
						      	  }
						      	}
						      }
						    </${'script'}>
						    
						    <style lang="less" scoped>
						      .dialog {
						        &__head {
						          background-color: #2398ff;
						          color: #fff;
						    
						          &__title {
						            padding-left: 10px;
						            font-size: 15px;
						          }
						    
						          &__close {
						            cursor: pointer;
						            &:hover {
						              .f-i-close {
						                color: #e00;
						              }
						            }
						          }
						        }
						    		
						        &__content {
						          background-color: #fff;
						          padding: 10px;
						        }
						    
						        &__foot {
						          background: #f8f8f8;
						          border-top: 1px solid #eee;
						    	    padding-right: 10px;
						        }
						      }
						    </style>
							`
						}
					],
					comp: {
						methods: {
						  async showDialog(e) {
						    const result = await $(e).pop(ExamDialog, {title: '编辑'})
						    $.alert(result.success, 'br', 3000)
						  }
						}
					}
				}]
      }
    },
    created() {
      this.merge([{
        name: 'title',
        remark: '对话框标题',
        type: 'String',
      }, {
        name: 'cover',
        remark: '是否显示一个半透明遮盖层',
        type: 'Boolean',
      }, {
        name: 'cover-props',
        remark: '遮盖层的属性。遮盖层是一个div，可设置这个div的属性如style, class等。',
        type: 'Boolean',
      }, {
        name: 'full-screen',
        remark: '是否全屏',
        type: 'Boolean',
      }, {
        name: 'hover-show-drop',
        remark: '是否在鼠标hover时展示弹窗',
        type: 'Boolean',
      }, {
        name: 'local',
        remark: '是否显示在commander的范围内',
        type: 'Boolean',
      }, {
        name: 'maxHeight',
        remark: '最大高度',
        type: 'Number',
      }, {
        name: 'maxWidth',
        remark: '最大宽度',
        type: 'Number',
      }, {
        name: 'minHeight',
        remark: '最小高度',
        type: 'Number',
      }, {
        name: 'minWidth',
        remark: '最小宽度',
        type: 'Number',
      }, {
        name: 'timeout',
        remark: '定时关闭。单位:毫秒',
        type: 'Number',
      }, {
        name: 'snap',
        remark: '吸附参数',
        type: 'Object',
        option: `
            <div><var>indent</var>: Number 缩进多少个像素。</div>
            <div style="margin:3px 0"><var>position</var>: String 吸附位置。可选值参考弹出位置的position</div>
            <div><var>target</var>: Widget | HTMLElement | Event 吸附目标</div>
            `,
      }, {
        name: 'position',
        remark: '弹出位置(相对于document.body的位置)',
        type: 'String |Object',
        option: `<div style="gap:3px"><var>tl</var><var>tr</var><var>rt</var><var>rb</var><var>br</var><var>bl</var><var>lb</var><var>lt
                </var><var>t</var><var>r</var><var>b</var><var>l</var><var>c</var></div>
                <div>以上值都可带"-"号，例如"-r"是"r"的镜像位置</div>
                <div>也可以是位置对象: <var>{top, bottom, left, right}</var></div>
                `
      }], 'attrs')
    }
  }
</script>
